<template>
	<view class="smart-page">
		<view class="smart-page-head">
			<view class="smart-page-head-title">picker选择列表</view>
		</view>
		<view>
			<view class="title">普通选择器</view>
			<view class="item">
				<view class="item-title">当前选择</view>
				<view class="item-picker">
					<picker @change="bindPickerChange" mode="selector" :range="array" range-key="cname">
					  {{array[index].cname}}
					</picker>
				</view>
			</view>
		</view>
		<view>
		  <view class="title">日期选择器</view>
		  <view class="item">
		    <view class="item-title">当前选择</view>
		    <view class="item-picker">
		      <picker @change="bindDatePickerChange" mode="date">{{choiceDate}}</picker>
		    </view>
		  </view>
		</view>
		
		<view>
		  <view class="title">时间选择器</view>
		  <view class="item">
		    <view class="item-title">当前选择</view>
		    <view class="item-picker">
		      <picker @change="bindTimePickerChange" mode="time">{{time}}</picker>
		    </view>
		  </view>
		</view>
		
	</view>
</template>

<script>
export default {
  data() {
    return {
      array: [{
        id: 1,
        cname: '中国'
      }, {
        id: 2,
        cname: '美国'
      }, {
        id: 3,
        cname: '巴西'
      }],
      index: 0,
      choiceDate: '2021-4-23',
      time: '12:00'
    }
  },
  methods: {
    /*改变选择*/
    bindPickerChange: function(e) {
      console.log(e.detail.value);
      this.index = e.detail.value;
    },
    bindDatePickerChange(e) {
      this.choiceDate = e.detail.value;
    },
    bindTimePickerChange(e){
      this.time=e.detail.value;
    }
  },
}
</script>

<style>
	.title {
		border-bottom: 1upx solid #C0C0C0;
		padding: 20upx 0;
	}

	.item {
		display: flex;
		border-bottom: 1upx solid #C0C0C0;
	}

	.item-title {
		padding: 20upx;
	}

	.item-picker {
		padding: 20upx 50upx;
	}
</style>
